<template>
  <div style="height: 300px;">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-select v-model="value1" placeholder="选择工程师" size="mini">
          <el-option
            v-for="item in time"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value2" placeholder="请选择主机" size="mini">
          <el-option
            v-for="item in hostList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value3" placeholder="报警类别" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <div ref="chart-main" style="width: 100%; height: 100%;;margin-top:20px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      time: [
        { value: '全部', label: '全部' },
        { value: '小明', label: '小明' },
        { value: '小玲', label: '小玲' }
      ],
      hostList: [
        { value: '23.12.21', label: '1.21.3' },
        { value: '156.4.3', label: '156.4.3' },
        { value: '12.365.4', label: '12.365.4' }
      ],
      options: [
        { value: '全部', label: '全部' },
        {
          value: '选项1',
          label: 'CPU'
        }, {
          value: '选项3',
          label: '内存'
        }, {
          value: '选项4',
          label: '磁盘'
        }],
      value1: '',
      value2: '',
      value3: ''

    }
  },
  mounted() {
    this.createChartMain()
  },
  methods: {
    createChartMain() {
      var myChart = echarts.init(this.$refs['chart-main'])
      var option = {
        title: {
          text: '工程师' // 设置图表标题
        },
        legend: {
          textStyle: {
          }
        },
        tooltip: {
          textStyle: {
          }
        },
        dataset: {
          source: [
            ['product', 'CPU', '内存', '磁盘'],
            ['小明', 3, 1, 3],
            ['小玲', 5, 3, 1],
            ['小李', 5, 5, 2]
          ]
        },
        xAxis: {
          type: 'category',
          name: '时间', // 设置x轴名称
          axisLabel: {
          }
        },
        yAxis: {
          name: '报警数',
          axisLabel: {
          }
        },
        series: [
          { type: 'bar', label: { show: true, color: '#FFFFFF' }},
          { type: 'bar', label: { show: true, color: '#FFFFFF' }},
          { type: 'bar', label: { show: true, color: '#FFFFFF' }}
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
